<template>
  <div class="app-container">
    <el-card class="box-card">
      <header>
        <div>
          <el-button type="primary" size="small" @click="addCLick">
            <i class="el-icon-circle-plus-outline"></i>增加
          </el-button>
          <el-button
            :disabled="!multipleSelection.length"
            type="danger"
            size="small"
            @click="deBounceWrap(delClick, multipleSelection)"
          >
            <i class="el-icon-delete"></i>删除
          </el-button>
        </div>
        <div class="flex mt-3">
          <el-select
            v-model="form.cate_id"
            placeholder="请选择类别"
            style="width: 17%"
          >
            <el-option
              v-for="item in addEditModal.categoryOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="form.style_id"
            placeholder="请选择风格标签"
            class="ml-4"
            style="width: 17%"
          >
            <el-option
              v-for="item in addEditModal.styleLabelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="form.activity_id"
            placeholder="活动选择"
            class="ml-4"
            style="width: 17%"
          >
            <el-option
              v-for="item in addEditModal.eventNameOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex mt-3">
          <el-select
            v-model="form.status"
            placeholder="请选择出售状态"
            style="width: 17%"
          >
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>

          <el-date-picker
            class="ml-4"
            style="width: 34%"
            v-model="dataArr"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>

          <!--          <el-date-picker class="ml-4" style="width: 17%"  value-format="yyyy-MM-dd"
                          v-model="form.start_date" type="date" placeholder="活动开始时间"></el-date-picker>
          <el-date-picker class="ml-4" style="width: 17%" v-model="form.end_date"  value-format="yyyy-MM-dd"
                          type="date" placeholder="活动结束时间"></el-date-picker>-->
          <el-input
            v-model="form.name"
            class="ml-4"
            style="width: 17%"
            placeholder="请输入名称"
          ></el-input>
          <div class="ml-4 flex items-center" style="width: 17%">
            <i
              @click="getTableData"
              class="el-icon-search p-1 text-white text-2xl bg-green-500 cursor-pointer"
            ></i>
            <i
              @click="resetClick"
              class="el-icon-refresh p-1 ml-3 text-white text-2xl bg-red-500 cursor-pointer"
            ></i>
          </div>
        </div>
      </header>
      <el-table
        :data="tableData"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        tooltip-effect="dark"
        ref="multipleTable"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号" width="80"></el-table-column>
        <el-table-column prop="product_name" label="名称"></el-table-column>
        <el-table-column prop="cate_name" label="类别"></el-table-column>
        <el-table-column prop="style" label="风格标签"></el-table-column>
        <el-table-column
          prop="activity_name"
          label="活动名称"
        ></el-table-column>
        <el-table-column prop="picture" label="展示图片">
          <template slot-scope="scope">
            <el-popover placement="left" max-width="420" trigger="hover">
              <img :src="scope.row.picture" alt="" class="w-64 h-64" />
              <img
                preview="3"
                :preview-text="`${scope.row.picture}`"
                slot="reference"
                :src="scope.row.picture"
                alt=""
                class="w-20"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="special" label="效果">
          <template slot-scope="scope">
            <div v-if="cateArr.includes(scope.row.category_id)"></div>
            <div v-else-if="inputArr.includes(scope.row.cate_id)"></div>
            <el-popover
              placement="right"
              max-width="420"
              trigger="hover"
              v-else
            >
              <img :src="scope.row.special" alt="" class="w-64 h-64" />
              <img
                preview="3"
                :preview-text="`${scope.row.special}`"
                slot="reference"
                :src="scope.row.special"
                alt=""
                class="w-20"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="status_name" label="出售状态">
          <template slot-scope="scope">
            <!-- <div class="px-5 py-1 text-white  rounded-md"
                 :class="scope.row.status_name === '上架' ? 'bg-green-400' : 'bg-red-600' ">{{ scope.row.status_name }}</div> -->
            <el-tag v-if="scope.row.status_name === '上架'" type="success">
              上架
            </el-tag>
            <el-tag v-else type="danger">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="start_time"
          label="活动开始时间"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="end_time"
          label="活动结束时间"
          width="200"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="240">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              @click="editClick(scope.row)"
              plain
            >
              <i class="el-icon-edit-outline"></i>编辑
            </el-button>
            <el-button
              type="primary"
              plain
              size="small"
              @click="deBounceWrap(sendClick, scope.row)"
            >
              <i class="el-icon-present"></i>赠送
            </el-button>
            <el-button
              plain
              type="danger"
              size="small"
              slot="reference"
              @click="deBounceWrap(delClick, [scope.row])"
            >
              <i class="el-icon-delete"></i>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <TMPagination
        :current-page.sync="pageList.page"
        :total.sync="pageList.total"
        :page-size.sync="pageList.page_size"
        @updateTable="getTableData"
      />

      <add-edit-modal
        :dialog-visible.sync="addEditModal.visible"
        :category-option="addEditModal.categoryOption"
        :style-label-options="addEditModal.styleLabelOptions"
        :status.sync="addEditModal.status"
        :id="addEditModal.id"
        :event-name-options="addEditModal.eventNameOptions"
        @updateTable="getTableData"
      />

      <send-dialog
        :send-dialog-visible.sync="SendDialog.visible"
        :send-form="SendDialog.sendForm"
        @sendForm="sendDialogClick"
      />
    </el-card>
  </div>
</template>

<script>
import {
  categoryData,
  getTableData,
  styleLabelData,
  eventNameData,
  delCommodity
} from "../../../api/personalizedMall/activeCommodities";
import { postSendData } from "../../../api/personalizedMall/discount";

import addEditModal from "./childComps/addEditModal/addEditModal";
import TMPagination from "../wishList/childComps/TMPagination/TMPagination";
import SendDialog from "../sendComponent/SendDialog";

export default {
  name: "activeCommodities",
  components: {
    addEditModal,
    TMPagination,
    SendDialog
  },
  data() {
    return {
      cateArr: [24, 23],
      inputArr: [8, 4],
      loading: false,
      dataArr: [],
      SendDialog: {
        visible: false,
        sendForm: {}
      },
      addEditModal: {
        visible: false,
        status: "Add",
        categoryOption: [],
        styleLabelOptions: [],
        eventNameOptions: [],
        id: 0
      },
      form: {
        cate_id: null,
        style_id: null,
        activity_id: null,
        name: null,
        status: null,
        start_date: null,
        end_date: null
      },
      pageList: {
        page: 1,
        page_size: 10,
        total: 10
      },
      value1: null,
      multipleSelection: [],
      tableData: []
    };
  },
  created() {
    this.styleLabelData();
    this.categoryData();
    this.eventNameData();
    this.getTableData();
  },
  methods: {
    // 点击事件
    addCLick() {
      this.addEditModal.status = "Add";
      this.addEditModal.visible = true;
    },
    editClick(data) {
      this.addEditModal.id = data.id;
      this.addEditModal.status = "Edit";
      this.addEditModal.visible = true;
    },
    /**
     * sendDialogClick
     * @param form 子组件传递过来的参数
     * @desc 赠送按钮发生点击事件
     */
    async sendDialogClick(form) {

      const data = await postSendData(form);
      if (data.code === 200) {
        this.$message.success("赠送成功");
        this.SendDialog.visible = false;
        await this.getTableData();
      }
    },
    /**
     * delClick
     * @desc 点击删除按钮
     * @param idArr {Array} 行数据 [{}]
     */
    async delClick(idArr) {
      this.$confirm("此操作将删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let ids = "";
          idArr.map(
            (item, index) =>
              (ids += index === idArr.length - 1 ? item.id + "" : item.id + ",")
          );
          const detail = await delCommodity(ids);

          if (detail.code === 200) {
            this.$message({ type: "success", message: "删除成功!" });
            await this.getTableData();
          }
        })
        .catch(() => {
          this.$message({ type: "info", message: "已取消删除" });
        });
    },
    /**
     * resetClick
     * @desc 重置按钮 点击事件
     */
    resetClick() {
      this.dataArr = [];
      for (const argumentsKey in this.form) {
        this.form[argumentsKey] = null;
      }
      this.pageList = {
        page: 1,
        page_size: 10,
        total: 10
      };
      this.getTableData();
    },
    /**
     * sendClick
     * @desc 赠送按钮的点击
     */
    sendClick(sendForm) {
      this.SendDialog.sendForm = sendForm;
      this.SendDialog.visible = true;
    },
    /**
     * checkBoxDisable
     * @desc 选择盒子被禁用
     * @param row 行
     * @returns {boolean}
     */
    checkBoxDisable(row) {
      if (row.name === "小明") {
        return false;
      } else {
        return true;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;

    },
    // 网络请求
    /**
     * getTableData
     * @desc 获取表格数据
     */
    async getTableData() {
      // 默认值
      let form = {
        cate_id: 0,
        style_id: 0,
        activity_id: 0,
        name: null,
        status: -1,
        start_date: null,
        end_date: null
      };
      this.dataArr.map((item, index) =>
        index === 0
          ? (this.form.start_date = item)
          : (this.form.end_date = item)
      );
      for (const formKey in this.form) {
        if (
          !(
            !this.form[formKey] &&
            typeof this.form[formKey] != "undefined" &&
            this.form[formKey] != 0
          )
        ) {
          form[formKey] = this.form[formKey];
        }
      }

      this.loading = true;
      const detail = await getTableData(form, {
        page_size: this.pageList.page_size,
        page: this.pageList.page
      });
      if (detail.code === 200) {
        this.tableData = detail.data.data;
        this.pageList.page = detail.data.current_page;
        this.pageList.total = detail.data.total;
        this.pageList.page_size = detail.data.per_page * 1;
        this.loading = false;
      }

    },
    /**
     * categoryData
     * @desc 获取所有的类别
     */
    async categoryData() {
      const detail = await categoryData();
      if (detail.code === 200) {
        detail.data.map(item =>
          this.addEditModal.categoryOption.push({
            value: item.id,
            label: item.title
          })
        );
      }
    },
    /**
     * styleLabelData
     * @desc 获取所有的风格标签
     * @returns {Promise<void>}
     */
    async styleLabelData() {
      const detail = await styleLabelData();
      if (detail.code === 200) {
        for (const detailKey in detail.data) {
          this.addEditModal.styleLabelOptions.push({
            value: detail.data[detailKey].id,
            label: detail.data[detailKey].name
          });
        }
        // this.addEditModal.styleLabelOptions)
      }
    },
    /**
     * eventNameData
     * @desc  获取活动名称
     */
    async eventNameData() {
      const detail = await eventNameData();
      if (detail.code === 200) {
        detail.data.list.map(item =>
          this.addEditModal.eventNameOptions.push({
            label: item.title,
            value: item.id,
            start_time: item.start_time,
            end_time: item.end_time
          })
        );
      }
    }
  }
};
</script>

<style></style>
